<script setup lang="ts">
import { usePlayerStore } from '@/stores/playerStore'
import moment from 'moment'
interface IProps {
  currentTime: number
  duration: number
  sliderValue: number
  playLyric: (time: number) => void
  pauseLyric: () => void
}
let touchMove = ref<boolean>(false)
const emits = defineEmits<{
  (event: 'update:current-time', currentTime: number): void
  (event: 'update:slider-value', sliderValue: number): void
}>()
const playerStore = usePlayerStore()
const props = defineProps<IProps>()
watch(
  () => props.currentTime,
  (newTime) => {
    if (touchMove.value) {
      return
    }
    emits('update:slider-value', (newTime / props.duration) * 100)
  }
)
//开始拖动时触发
function dragStart() {
  touchMove.value = true
}
// 进度条实时变化出发
function updateModelValue(value: number) {
  emits('update:slider-value', value)
  emits('update:current-time', (value * props.duration) / 100)
  props.playLyric((value * props.duration) / 100)
  props.pauseLyric()
}
// 进度变化且结束拖动后触发
function sliderChange(value: number) {
  touchMove.value = false
  emits('update:current-time', (value * props.duration) / 100)
  if (!playerStore.playing) {
    playerStore.playing = true
  }
}
defineExpose({
  touchMove
})
</script>

<template>
  <section class="progress">
    <span class="current-time">{{ moment(props.currentTime).format('mm:ss') }}</span>
    <van-slider
      :model-value="props.sliderValue"
      :button-size="12"
      active-color="#ffcd32"
      @update:model-value="updateModelValue"
      @change="sliderChange"
      @drag-start="dragStart"
    />
    <span class="duration-time">{{ moment(props.duration).format('mm:ss') }}</span>
  </section>
</template>

<style scoped lang="scss">
.progress {
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .current-time {
    margin-right: 10px;
    font-size: $font-size-small;
  }
  .duration-time {
    margin-left: 10px;
    font-size: $font-size-small;
  }
}
</style>
